<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="105">
          <FormItemPanel title="图标">
            <FormItem label="显示">
              <i-switch v-model="icon.show">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="icon.color" alpha recommend/>
            </FormItem>
            <FormItem label="边距">
              <InputNumber size="small" :max="1000" :min="0" v-model="icon.padding"></InputNumber>
            </FormItem>
            <FormItem label="大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="icon.size"></InputNumber> px
            </FormItem>
          </FormItemPanel>

          <FormItem label="字体大小">
            <InputNumber size="small" :max="10000" :min="1" v-model="fontSize"></InputNumber> px
          </FormItem>
          <FormItem label="字体颜色">
            <PnColorPicker size="small" v-model="color" alpha recommend/>
          </FormItem>
          <FormItem label="显示日期">
            <i-switch v-model="showDate">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="显示时间">
            <i-switch v-model="showTime">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="显示星期">
            <i-switch v-model="showWeek">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>

        </Form>

      </TabPane>

    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'ClockCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({

        fontSize: 'component.compConfigData.fontSize',
        color: 'component.compConfigData.color',
        showDate: 'component.compConfigData.showDate',
        showTime: 'component.compConfigData.showTime',
        showWeek: 'component.compConfigData.showWeek',
        icon: 'component.compConfigData.icon'

      })
    }
  }
</script>

<style scoped>

</style>
